<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>社区</title>
		{% load static %}
		<!--引入layui的css文件和js文件-->
		<link rel="stylesheet" type="text/css" href="{% static 'layui-v2.6.8/layui/css/layui.css' %}" />
		<script src="{% static 'layui-v2.6.8/layui/layui.js' %}" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="{% static 'CSS/index.css' %}" />
		<link rel="stylesheet" type="text/css" href="{% static 'CSS/community.css' %}" />
	</head>
	<body style="background-color:#F5F5F5">
		<header>
			<!--首页导航	-->
			<ul class="layui-nav" style="display:flex;justify-content:center;">
				<li class="layui-nav-item"><a href="/washer/index" style="font-size:24px;">首页</a></li>
				<li class="layui-nav-item"><a href="/washapp/index" style="font-size:24px;">洗衣</a></li>
				<li class="layui-nav-item layui-this"><a href="/community/index" style="font-size:24px;">社区</a></li>
				<li class="layui-nav-item"><a href="/washer/login" style="font-size:24px;">我的</a></li>
			</ul>
		</header>

		<main>
			<form action="/community/index" id="note" method="post">
				{% csrf_token %}
				<div id="community">
					<input id="title" type="text" name="title" required placeholder="标题">
					<textarea id="notebook" name="notebook" autofocus required form="note"
						placeholder="反馈问题/社区建议/个人动态"></textarea>
					<div id="publish">
						<button id="btn1" class="layui-btn" type="submit">发表</button>
					</div>
				</div>
			</form>

			<div id="onview">
				<h1 style="color:#05295c;margin-bottom:10px;text-shadow:-2px -3px 5px #282601;">以下是社区论坛</h1>
				{% load static %}
				{% for note in notebook.values %}
				<div class="onview"
					style="background-color:#e3e5e8;padding:14px;border-left:8px solid #708090;border-bottom:1px solid #708090;">
					<div style="font-size:18px;">
						<h3 style="color:#1E90FF;margin-bottom:3px;">{{note.title}}</h3>
						<p>
							<img src="{% static 'img/timer16.png' %}" alt="时间"
								style="margin-left:60%;">&nbsp;{{note.update_time}}
						</p>
						<p>&emsp;&emsp;{{note.content}}</p>
						<p><img src="{% static 'img/user16.png' %}" alt="用户"
								style="margin-left:60%;">&nbsp;{{note.user_id}}</p>
					</div>
				</div>
				{% empty %}
				<h2>此处没有任何留言！</h2>
				<h2>可在上方留下佳句！</h2>
				{% endfor %}
			</div>
		</main>

		<footer>

		</footer>
	</body>
</html>
